<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的订单 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
		<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
		<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
		<link rel="stylesheet" type="text/css" href="./components/user-frame.css" />
		<style>
			.app-tab{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #EAEAEA;
			}
			
			.app-tab-left li{
				display: inline-block;
				position: relative;
				width: 116px;
				height: 36px;
				line-height: 34px;
				border-bottom: 2px solid transparent;
				text-align: center;
				cursor: pointer;
				top: 2px;
			}
			
			.app-tab-left li.active:before{
				content: "";
				display: block;
				position: absolute;
				width: 0px;
				height: 0px;
				border-left: 5px solid transparent;
				border-top: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #3197D7;
				bottom: 0;
				right: 53px;
			}
			
			.app-tab-left li.active{
				color: #3197D7;
				border-bottom: 2px solid #3197D7;
			}
			
			.app-order{
				border: 1px solid #E5EAEC;
			}
			
			.app-header{
				display: grid;
				grid-template-columns: 1fr 100px 100px 100px 200px 200px;
				height: 50px;
				border: 1px solid #ECECEC;
				background: #F4F4F4;
				margin-top: 30px;
				margin-bottom: 20px;
			}
			
			.app-header > div{
				line-height: 48px;
			}
			
			.app-order-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #F0F9FE;
				height: 42px;
				padding: 0 12px;
			}
			
			
			.app-order-head .el-button--mini{
				padding: 4px 8px;
			}
			
			.app-order-items-item{
				display: grid;
				grid-template-columns: 1fr 100px 100px 100px 200px 200px;
				height: 102px;
				padding: 0 12px;
				border-top: 1px solid #E5EAEC;
			}
			
			.app-order-items-item > div{
				line-height: 102px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header-full :bordered="true"></header-full>
			<user-frame class="m-t-20">
				<div class="app-tab">
					<div class="app-tab-left text-general-1">
						<ul>
							<li :class="{active: tab == 0}" @click="tab = 0">全部订单</li>
							<li :class="{active: tab == 1}" @click="tab = 1">待付款({{wait_orders.length}})</li>
							<li :class="{active: tab == 2}" @click="tab = 2">待收货({{finish_orders.length}})</li>
						</ul>
					</div>
					<div class="app-tab-right text-4 text-general-1">
						您所在的位置: 我的交易 > 我的订单
					</div>
				</div>
				<div class="app-header">
					<div class="center text-4 text-general-1">商品信息</div>
					<div class="center text-4 text-general-1">单价(元)</div>
					<div class="center text-4 text-general-1">数量</div>
					<div class="center text-4 text-general-1">实付款</div>
					<div class="center text-4 text-general-1">交易状态</div>
					<div class="center text-4 text-general-1">交易操作</div>
				</div>
				<div class="app-orders">
					<div class="app-order m-t-20" v-for="order of [all_orders, wait_orders, finish_orders][tab]">
						<div class="app-order-head">
							<div class="app-order-head-left text-4 text-general-1">
								<span class="m-r-12">订单编号: {{order.orderNo}}</span>
								<span class="m-r-12">下单时间: {{order.createTime}}</span>
								<span class="m-r-12">收件人: {{order.addr.name}}</span>
								<span>订单状态: {{order.statusDesc}}</span>
							</div>
							<div class="app-order-head-right">
								<el-button type="primary" :size="'mini'" v-if="order.status == 0" @click="go_pay(order.orderNo)">立即付款</el-button>
								<el-button type="primary" :size="'mini'" v-if="order.status == 2 " @click="go_receive(order)">确认收货</el-button>
								<el-button size="mini" type="text"v-if="order.status == 0" @click="go_cancel(order)">取消订单</el-button>
								<el-button size="mini" type="text" @click="go_order_detail(order.orderNo)">订单详情</el-button>
							</div>
						</div>
						<div class="app-order-items">
							<div class="app-order-items-item text-4 text-general-1" v-for="item in order.orderItems">
								<div class="center">{{item.commodityName}}</div>
								<div class="center">¥{{item.curPrice.toFixed(2)}}</div>
								<div class="center">{{item.quantity}}</div>
								<div class="center">¥{{item.totalPrice.toFixed(2)}}</div>
							</div>
						</div>
					</div>
				</div>
			</user-frame>
			<footer-image></footer-image>
			<footer-link></footer-link>
			<footer-bottom></footer-bottom>
		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="./components/min-width-container.js"></script>
		<script src="./components/footer-image.js"></script>
		<script src="./components/footer-bottom.js"></script>
		<script src="./components/footer-link.js"></script>
		<script src="./components/header-full.js"></script>
		<script src="./components/user-frame.js"></script>
		<script>
		    const app = new Vue({
		        el: "#app",
		        data(){
					return {
						tab: 0,
						all_orders: [],
						wait_orders: [],
						finish_orders: []
					};
		        },
		        created(){
		        	this.load_all_orders();
		        	this.load_wait_orders();
		        	this.load_finish_orders();
		        },
		        methods: {
					go_order_detail(orderNo){
						window.location.href='/order-detail.html?' + orderNo;
					},
					load_all_orders(){
						const temp_orders = [];
						const append = function(orders){
							for(let order of orders){
								temp_orders.push(order);
							}
						}
						this.load_order(0, append);
						this.load_order(1, append);
						this.load_order(2, append);
						this.load_order(3, append);
						this.load_order(4, append);
						this.load_order(5, append);
						this.all_orders =  temp_orders;
					},
					load_wait_orders(){
						this.load_order(0, (orders)=>{this.wait_orders = orders});
					},
					load_finish_orders(){
						this.load_order(1, (orders)=>{this.finish_orders = this.finish_orders.concat(orders)});
						this.load_order(2, (orders)=>{this.finish_orders = this.finish_orders.concat(orders)});
					},
					load_order(status, callback){
						const params = new URLSearchParams();
						params.append("status", status);
						axios.post("/order/getlist.do", params).then(response=>{
							if(response.data.status === 0){
								callback(response.data.data);
							}else{
								if(response.data.msg){
									console.log(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
						})
					},
					go_pay(orderNo){
						window.location.href = "/pay.html?" + orderNo;
					},
					go_cancel(item){
						this.$confirm('取消此订单, 是否继续?', '提示', {
						    confirmButtonText: '确定',
						    cancelButtonText: '取消',
						    type: 'warning'
						}).then(() => {
						    const params = new URLSearchParams();
						    params.append("orderNo", item.orderNo);
						    axios.post("/order/cancelorder.do", params).then(response=>{
						  		if(response.data.status === 0){
									this.$message({
										message: "取消成功",
										type: "success"
									});
									this.refresh(item.orderNo, 5, "取消");
						  		}else{
						  			if(response.data.msg){
						  	    		this.$message.error(response.data.msg);
						  			}
						  		}
						    }).catch(err=>{
						  	    console.log(err);
						  	    this.$message.error("连接服务器异常");
						    });

						})
					},
					go_receive(item){
						const params = new URLSearchParams();
						params.append("orderNo", item.orderNo);
						axios.post("/order/confirmreceipt.do", params).then(response=>{
							if(response.data.status === 0){
								this.$message({
									message: "收货成功",
									type: "success"
								});
								this.refresh(item.orderNo, 3, "交易成功");
							}else{
								if(response.data.msg){
									this.$message.error(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
							this.$message.error("连接服务器异常");
						});
					},
					/* 更新item的显示 */
					refresh(orderNo, status, statusDesc){
						const item1 = this.all_orders.find((item)=>{return item.orderNo === orderNo});
						const item2 = this.wait_orders.find((item)=>{return item.orderNo === orderNo});
						const item3 = this.finish_orders.find((item)=>{return item.orderNo === orderNo});
						for(let item of [item1, item2, item3]){
							if(item !== undefined){
								item.status = status;
								item.statusDesc = statusDesc;
							}
						}

					}
		        }
		    });
			
		</script>
	</body>
</html>
